<template>
  <div class="mq-page-detail" style="position: absolute; top: 0; left: 0; display: flex; height: calc(100% + 0px)">
    <div style="width: 196px; height: 100%; color: white; background-color: #222834">
      <!--      <div-->
      <!--        style="-->
      <!--          display: flex;-->
      <!--          align-items: center;-->
      <!--          justify-content: center;-->
      <!--          height: 50px;-->
      <!--          border-bottom: 1px solid white;-->
      <!--          cursor: pointer;-->
      <!--        "-->
      <!--        @click="backPage"-->
      <!--      >-->
      <!--        <left-outlined />-->
      <!--        返回MQ消息页-->
      <!--      </div>-->
      <a-page-header title="返回角色管理" @back="backPage" />
    </div>
    <div style="width: calc(100% - 196px)">
      <pageManage>
        <template #head>
          <div>
            <span class="search-item">GroupId:</span>
            <a-input v-model:value="searchFun.searchInfo.groupId" class="search-item" style="width: 120px"></a-input>
          </div>
          <div>
            <span class="search-item">Tag:</span>
            <a-input v-model:value="searchFun.searchInfo.tag" class="search-item" style="width: 120px"></a-input>
          </div>
          <div>
            <span class="search-item">Topic:</span>
            <a-input v-model:value="searchFun.searchInfo.topic" class="search-item" style="width: 120px"></a-input>
          </div>
          <div>
            <span class="search-item">listenerUrl:</span>
            <a-input
              v-model:value="searchFun.searchInfo.listenerUrl"
              class="search-item"
              style="width: 120px"
            ></a-input>
          </div>

          <a-button type="primary" @click="searchFun.searchClick">
            <SearchOutlined />
            查询
          </a-button>
          <a-button style="margin: 0 15px" @click="searchFun.reset">重置</a-button>
        </template>
        <template #middle>
          <div>
            <a-table
              :columns="table.columns"
              :data-source="portComList"
              :pagination="false"
              :scroll="{ y: table.tableHeight }"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'option'"></template>
              </template>
            </a-table>
          </div>
        </template>
        <template #foot></template>
      </pageManage>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineEmits, defineProps, toRefs } from 'vue'
import { LeftOutlined } from '@ant-design/icons-vue'
import factory from './factory'
import pageManage from '@/components/pageManageV2'
const props = defineProps({ configId: { type: String, default: '' } })
const { configId } = toRefs(props)
const portComList = ref([])
//==翻页功能======================
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (page, pageSize) => {
    pagFun.pagInfo.pageNo = page
    pagFun.pagInfo.pageSize = pageSize
    table.getTable()
  },
})

//==表格================
const table = reactive({
  columns: [
    {
      title: 'GroupId',
      dataIndex: 'groupId',
      key: 'groupId',
    },
    {
      title: '业务ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: 'listenerUrl',
      dataIndex: 'listenerUrl',
      key: 'listenerUrl',
    },
    {
      title: '消息种类',
      dataIndex: 'mqKind',
      key: 'mqKind',
    },
    {
      title: 'Tag',
      dataIndex: 'tag',
      key: 'tag',
    },
    {
      title: 'Topic',
      dataIndex: 'topic',
      key: 'topic',
    },
  ],
  tableHeight: 332,
  getTable: (pag = pagFun.pagInfo) => {
    factory.getDetail({ ...pag, configId: configId.value }).then((res) => {
      portComList.value = res.data
      pagFun.pagInfo.total = Number(res.data.totalCount)
    })
  },
})
table.getTable()
let menu = document.getElementById('indexlayout-left')
let menutop = document.getElementById('indexlayout-right-top')
onMounted(() => {
  menu.style.display = 'none'
  menutop.style.display = 'none'

  let ele = document.getElementsByClassName('mq-page-detail')
  table.tableHeight = ele[0].offsetHeight - 217 + 32 + 86
})

/***查询功能************************/
const searchFun = reactive({
  searchInfo: { groupId: '', tag: '', topic: '', listenerUrl: '' },
  searchClick: () => {
    let pagInfo = pagFun.pagInfo
    pagInfo.pageNo = 1
    let post = { ...pagInfo, ...searchFun.searchInfo }
    table.getTable(post)
  },
  reset: () => {
    searchFun.searchInfo = { groupId: '', tag: '', topic: '', listenerUrl: '' }
  },
})

//===backPage=========
const emit = defineEmits(['back'])
const backPage = () => {
  menu.style.display = 'initial'
  menutop.style.display = 'initial'
  emit('back')
}
</script>

<style lang="less" scoped>
.search-item {
  margin-right: 15px;
}

:deep .ant-page-header-back-button {
  color: #fff;
}

:deep .ant-page-header-heading-title {
  color: #fff;
  font-size: 16px;
}
</style>
